<template>
  <div class="flex-view">
    <div class="flex-1">
      <div class="flex-1-inner">
        <!-- 视频通话 -->
        <div class="yyth-view">
          <div class="spth-title">
            <span>视频通话</span>
            <span class="deviceNm">{{ deviceId }}</span>
          </div>
          <video :id="'remoteVideo'+deviceId" controls autoplay muted></video>
          <audio :id="'remoteAudio'+deviceId" controls autoplay></audio>
          <el-button type="primary" @click="connect">连接</el-button>
          <el-button type="primary" @click="p2p_video(deviceId)">开启通话</el-button>
          <!-- <div class="action-btn" @click="p2p_video(deviceId)">开启通话</div> -->
          <!-- <div class="action-btn" @click="connect">连接网关</div> -->
          <!-- <div class="action-btn" @click="closeCall">关闭通话</div> -->
        </div>
      </div>
    </div>
    <div style="display:none">
      <video id="localVideo" autoplay controls></video>
      <audio id="localAudio" autoplay controls></audio>
    </div>
  </div>
</template>

<script>
import MCS8Utitl from "../mcs8/js/MCS8Utitl";

export default {
  components: {},
  data() {
    return {
      deviceId: "test061801", // 设备id
      deviceType: "Milkway", // 设备所属类型：海联HaiLian、米可维Milkway
    };
  },

  computed: {},
  created() {

  },
  mounted() {
  },
  methods: {
    p2p_video(devId) {
      MCS8Utitl.FUNC_CreateP2pMediaGroup(devId);
    },
    connect() {
      MCS8Utitl.sdkclient
      .connect(
        document.getElementById("localVideo"),
        document.getElementById("localAudio")
      )
      .then(res => {
        console.log(res);
        if (res) {
            console.log("连接成功",res);
        }
      });
    },
  },
  
};
</script>

<style lang="scss" scoped>
</style>
